<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.v-enter,
			.v-leave-to {
				opacity: 0;
				transform: translateX(12.5rem);
			}

			.v-enter-active,
			.v-leave-active {
				transition: all 0.5s ease;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- login必须要带''    这样才会显示 -->
			<a href="" @click.prevent="iscom='login'">登录</a>
			<a href="" @click.prevent="iscom='register'">注册</a>
			<!-- mode设置先出去再进来 -->
			<transition mode="out-in">
				<component :is="iscom"></component>
			</transition>
			<!-- <component :is="'login'"></component> 在这里也要用''-->
		</div>
		<script>
			Vue.component('login', {
				template: '<h1 style="color: #FF69B4;">登录</h1>'
			})

			Vue.component('register', {
				template: '<h1 style="color: #FF69B4;">注册</h1>'
			})

			new Vue({
				el: '#app',
				data: {
					iscom: 'login'
				},
				methods: {}
			})
		</script>
	</body>
</html>
